<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看" v-model="visible" width="1360px" :z-index="2000" @close="handleClose">
    <el-form ref="formRef" :model="form" :disabled="isLook" :label-width="0">
      <div class="v-title mb-3">基础信息</div>
      <div class="grid grid-cols-4 gap-y-2 gap-x-3 text-gray-950 items-center">
        <div><span class="inline-block w-20 mr-2 text-gray-500">采购单号</span>{{ form?.basic?.purchase_no||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">订单来源</span>{{ form?.basic?.order_source_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">下单时间</span>{{ form?.basic?.start_payment_time||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">供应商类型</span>{{ form?.basic?.purchase_type_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">备货方式</span>{{ form?.basic?.prepare_type_name||'-' }}</div>
        <div class="flex items-center">
          <span class="inline-block w-20 mr-2 text-gray-500">目的仓库</span>
          <VSelect v-model="form.basic.destination_warehouse" :options="options.warehouse" select filterable clearable
            placeholder="账号类型">
          </VSelect>
        </div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">供应商</span>{{ form?.basic?.supplier_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">供应商类型</span>{{ form?.basic?.purchase_type_name||'-' }}</div>
        <div>
          <span class="inline-block w-20 mr-2 text-gray-500">平台单号</span>
          <el-button link type="primary" @click="platformVisible = true">{{ form?.basic?.platform_order_no||'-' }}</el-button>
        </div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">业务状态</span>{{ form?.basic?.purchase_status_name||'-' }}</div>
        <div class="flex items-center">
          <span class="inline-block w-20 mr-2 text-gray-500">是否退税</span>
          <el-select v-model="form.basic.is_drawback" filterable clearable placeholder="账号类型" @change="drawbackChange">
            <el-option v-for="(d, i) in options.is_drawback" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">结算方式</span>{{ form?.basic?.period_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">结算币种</span>{{ form?.basic?.currency_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">物流单号</span>{{ (form?.basic?.tracking_no || [])?.join(',')||'-' }}
        </div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">支付账号</span>{{ form?.basic?.alipay_account||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">交易方式</span>{{ form?.basic?.payment_type_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">财务状态</span>{{ form?.basic?.finance_status_name||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">采购人员</span>{{ form?.basic?.purchase_user||'-' }}</div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">订单备注</span>{{ form?.basic?.remark||'-' }}</div>
        <div class="flex items-center">
          <span class="inline-block w-20 mr-2 text-gray-500">公司主体</span>
          <el-select v-model="form.basic.company_id" filterable clearable placeholder="账号类型">
            <el-option v-for="(d, i) in options.company_id" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </div>
        <div class="flex items-center">
          <span class="inline-block w-20 mr-2 text-gray-500 whitespace-nowrap">调整金额</span>
          {{ form?.basic?.adjust_price||'-' }}
        </div>
        <div><span class="inline-block w-20 mr-2 text-gray-500">调整原因</span>{{ form?.basic?.adjust_reason||'-' }}</div>
      </div>
      <div>
        <div class="v-title my-3">产品信息</div>
        <vxe-table ref="tableRef" :data="form.sku" size="small">
          <vxe-column title="订单来源" :min-width="140">
            <template #default="{ row }">
              <div><span class='text-gray-500'>订单来源: </span>{{ row.order_source }}</div>
              <div><span class='text-gray-500'>来源单号: </span><el-link type='primary'>{{ row.source_no }}</el-link></div>
            </template>
          </vxe-column>
          <vxe-column title="sku" :min-width="150">
            <template #default="{ row }">
              <div><span class='text-gray-500'>产品sku: </span>{{ row.product.sku }}</div>
              <el-button link type='primary' @click="historyRef.open(row.sku)">
                <i class="dk-iconfont icon-Tickets" /></el-button>
              <div><span class='text-gray-500'>自定义sku: </span><el-link type='primary'>{{ row.product.custom_sku
              }}</el-link></div>
            </template>
          </vxe-column>
          <vxe-column title="图片" :min-width="120">
            <template #default="{ row }">
              <VImage :src="row.product.main_img" size="100px"></VImage>
            </template>
          </vxe-column>
          <vxe-column title="产品名称" :min-width="140">
            <template #default="{ row }">
              <!-- <div>{{ row.product.sku_cn_title }}</div> -->
              <VText :value="row.product.sku_cn_title" :line="4"/>
            </template>
          </vxe-column>
          <vxe-column title="产品链接" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>
                <div class="text-2-line">{{ row.product.goods_link }}</div>
              </el-link>
            </template>
          </vxe-column>
          <vxe-column title="产品属性" :min-width="140">
            <template #default="{ row }">
              <div>{{ row.product.attribute }}</div>
            </template>
          </vxe-column>
          <vxe-column title="下单数量" field="purchase_num" :min-width="80" />
          <vxe-column title="产品单价" :min-width="80">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.unit_price_tax : row.unit_price }}
            </template>
          </vxe-column>
          <vxe-column title="运费分摊" field="tracking_price" :min-width="80" />
          <vxe-column title="折扣分摊" field="discount_price" :min-width="80" />
          <vxe-column title="单个采购成本" :min-width="100">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.unit_purchase_price_tax : row.unit_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="产品总金额" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.total_price_tax : row.total_price }}
            </template>
          </vxe-column>
          <vxe-column title="采购总成本" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.total_purchase_price_tax : row.total_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="预计到货时间" :min-width="140">
            <template #default="{ row }">
              <template v-if="row.origin_expect_delivery_time">
                <div><span class='text-gray-500'>初始: </span>{{ row.origin_expect_delivery_time }}</div>
                <div v-for="(d, i) in row.skuChangeDeliver" :key="i"><span class='text-gray-500'>{{ ['一', '二', '三'][i]
                }}改:
                  </span>{{ d.expect_delivery_time }}</div>
              </template>
              <template v-else>
                {{ row.expect_delivery_time }}
              </template>
            </template>
          </vxe-column>
          <vxe-column title="物流信息" :min-width="140">
            <template #default="{ row }">
              <template v-for="(d, i) in row.skuTracking" :key="i">
                <div><span class='text-gray-500'>物流单号: </span>{{ d.tracking_no }}</div>
                <div><span class='text-gray-500'>快递公司: </span>{{ d.tracking_supplier }}</div>
              </template>
            </template>
          </vxe-column>
          <vxe-column title="发货信息" :min-width="140">
            <template #default="{ row }">
              <template v-for="(d, i) in row.deliver_data" :key="i">
                <div><span class='text-gray-500'>发货单号: </span>{{ d.deliver_no }}</div>
                <div><span class='text-gray-500'>预计发货日期: </span>{{ d.except_deliver_time }}</div>
                <div><span class='text-gray-500'>装箱单: </span>{{ d.deliver_num }}</div>
              </template>
            </template>
          </vxe-column>
          <vxe-column title="外验信息" :min-width="140">
            <template #default="{ row }">
              <template v-for="(d, i) in row.inspection_data" :key="i">
                <div><span class='text-gray-500'>预计外验时间: </span>{{ d.inspection_time }}</div>
                <div><span class='text-gray-500'>QA验货时间: </span>{{ d.qa_inspection_time }}</div>
              </template>
            </template>
          </vxe-column>
        </vxe-table>
        <div class="flex gap-10">
          <div>总计</div>
          <div><span class='text-gray-500'>产品总数量: </span>{{ form.basic.purchase_num }}</div>
          <div><span class='text-gray-500'>产品总额: </span>{{ form.basic.is_drawback === 2 ? form.basic.total_price_tax :
            form.basic.total_price }}</div>
          <div><span class='text-gray-500'>总运费: </span>{{ form.basic.tracking_price }}</div>
          <div><span class='text-gray-500'>总优惠: </span>{{ form.basic.discount_price }}</div>
          <div><span class='text-gray-500'>采购总成本: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.total_purchase_price_tax : form.basic.total_purchase_price }}</div>
          <div><span class='text-gray-500'>应付金额: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.purchase_price_tax : form.basic.purchase_price }}</div>
          <div><span class='text-gray-500'>到货金额: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.deliver_price_tax : form.basic.deliver_price }}</div>
        </div>
      </div>
      <div>
        <div class="v-title my-3">付款信息</div>
        <vxe-table ref="tableRef" :data="form.payment" size="small">
          <vxe-column title="付款单号" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>{{ row.payment_no }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="请款人/请款时间" :min-width="160">
            <template #default="{ row }">
              {{ row.create_user }}
              <div>{{ row.create_time }}</div>
            </template>
          </vxe-column>
          <vxe-column title="付款状态" field="payment_status_name" :min-width="80" />
          <vxe-column title="结算方式" field="payment_type_name" :min-width="80" />
          <vxe-column title="期望付款时间" field="except_payment_time" :min-width="150" />
          <vxe-column title="申请付款金额" field="apply_price" :min-width="80" />
          <vxe-column title="实际付款金额" field="payment_price" :min-width="80" />
          <vxe-column title="优惠/折扣/售后" :min-width="120">
            <template #default="{ row }">
              <div><span class='text-gray-500'>优惠: </span>{{ form.discount_price }}</div>
              <div><span class='text-gray-500'>折扣: </span>{{ form.preferential_price }}</div>
              <div><span class='text-gray-500'>售后: </span>{{ form.after_sale_price }}</div>
            </template>
          </vxe-column>
          <vxe-column title="付款人/付款时间" :min-width="160">
            <template #default="{ row }">
              {{ row.payment_user }}
              <div>{{ row.payment_time }}</div>
            </template>
          </vxe-column>
          <vxe-column title="付款凭证" field="payment_voucher" :min-width="120">
            <template #default="{ row }">
              <VText :value="row.payment_voucher" :line="3" copy/>
            </template>
          </vxe-column>
          <vxe-column title="备注" field="remark" :min-width="120" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">入库信息</div>
        <vxe-table ref="tableRef" :data="form.inbound" size="small">
          <vxe-column title="入库单号" :min-width="140">
            <template #default="{ row }">
              {{ row.inbound_no }}
            </template>
          </vxe-column>
          <vxe-column title="入库仓" field="inbound_warehouse" :min-width="140" />
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="收货数量" field="deliver_num" :min-width="100" />
          <vxe-column title="质检数量" field="qa_num" :min-width="90" />
          <vxe-column title="良品数" field="quality_num" :min-width="90" />
          <vxe-column title="不良品数" field="reject_num" :min-width="90" />
          <vxe-column title="入库数" field="inbound_num" :min-width="90" />
          <vxe-column title="入库人" field="create_user" :min-width="90" />
          <vxe-column title="时间" field="inbound_time" :min-width="180">
            <template #default="{ row }">
              <div><span class='text-gray-500'>签收时间: </span>{{ form.sign_time }}</div>
              <div><span class='text-gray-500'>质检时间: </span>{{ form.qa_time }}</div>
              <div><span class='text-gray-500'>入库上架: </span>{{ form.inbound_time }}</div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3"> 异常处理信息</div>
        <vxe-table ref="tableRef" :data="form.abnormal" size="small">
          <vxe-column title="异常单号" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>{{ row.abnormal_no }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="异常单状态" field="abnormal_status_name" :min-width="100" />
          <vxe-column title="异常类型" field="abnormal_method_name" :min-width="80" />
          <vxe-column title="异常原因" field="abnormal_reason_name" :min-width="100" />
          <vxe-column title="下单数量" field="purchase_num" :min-width="80" />
          <vxe-column title="收货数量" field="deliver_num" :min-width="80" />
          <vxe-column title="良品数量" field="quality_num" :min-width="80" />
          <vxe-column title="入库数量" field="inbound_num" :min-width="80" />
          <vxe-column title="不良数量" field="reject_num" :min-width="80" />
          <vxe-column title="质检人/质检时间" :min-width="180">
            <template #default="{ row }">
              <div><span class='text-gray-500'>质检人: </span>{{ form.qa_actually_user }}</div>
              <div><span class='text-gray-500'>质检时间: </span>{{ form.qa_time }}</div>
            </template>
          </vxe-column>
          <vxe-column title="仓库处理人/处理时间" :min-width="180">
            <template #default="{ row }">
              <div><span class='text-gray-500'>仓库处理人: </span>{{ form.warehouse_user }}</div>
              <div><span class='text-gray-500'>处理时间: </span>{{ form.warehouse_time }}</div>
            </template>
          </vxe-column>
          <vxe-column title="处理方式" field="process_type" :min-width="100" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">退款信息</div>
        <vxe-table ref="tableRef" :data="form.refund" size="small">
          <vxe-column title="退款单号" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>{{ row.refund_no }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="下单金额" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ?
                row.total_purchase_price_tax : row.total_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="运费" field="tracking_price" :min-width="90" />
          <vxe-column title="优惠" field="discount_price" :min-width="90" />
          <vxe-column title="调整金额" field="refund_price" :min-width="90" />
          <vxe-column title="可退金额" field="can_refund_price" :min-width="90" />
          <vxe-column title="到货金额" field="deliver_price" :min-width="90" />
          <vxe-column title="已付金额" field="payment_price" :min-width="90" />
          <vxe-column title="未到货金额" field="not_deliver_price" :min-width="120" />
          <vxe-column title="申请退款金额" field="apply_price" :min-width="120" />
          <vxe-column title="申请退运费" field="apply_tracking_price" :min-width="120" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">日志信息</div>
        <vxe-table :data="form.log" size="small">
          <vxe-column title="操作人" field="create_user"></vxe-column>
          <vxe-column title="操作类型" field="log_type"></vxe-column>
          <vxe-column title="详情" field="log_info" min-width="300"></vxe-column>
          <vxe-column title="操作时间" field="create_time"></vxe-column>
        </vxe-table>
      </div>
    </el-form>
    <template v-if="isLook" #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <template v-else #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="create(1)">提 交</el-button>
      <el-button type="primary" @click="create(2)">确 定</el-button>
    </template>
    <el-dialog v-if="form.basic.platform_data" title="1688平台信息" v-model="platformVisible" width="800px">
      <div class="grid grid-cols-2 gap-y-2 text-gray-950">
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台订单号</span>{{ form.basic.platform_order_no
        }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">买家会员登录名</span>{{
          form.basic.platform_data.alibaba_account
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台供应商公司名称</span>{{
          form.basic.platform_data.supplier_name }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">买家支付宝账号</span>{{
          form.basic.platform_data.alipay_account
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">订单状态</span>{{
          form.basic.platform_data.order_status }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">卖家手机</span>{{
          form.basic.platform_data.seller_phone }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">交易方式</span>{{
          form.basic.platform_data.trade_type }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台下单数量及金额</span>数量: {{
          form.basic.platform_data.order_num }} <span class="ml-3">总金额: {{ form.basic.platform_data.total_price }}</span>
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">结算方式</span>{{
          form.basic.platform_data.period_type }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">运费</span>{{
          form.basic.platform_data.tracking_price }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">1688结算日期</span>{{
          form.basic.platform_data.settlement_day
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">优惠金额</span>{{
          form.basic.platform_data.discount_price }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">1688物流状态</span>{{
          form.basic.platform_data.tracking_info.join(',')
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">退款金额</span>{{
          form.basic.platform_data.refund_price }}
        </div>
        <div class="flex col-span-2"><span class="inline-block w-32 mr-2 text-gray-500">买家留言</span>{{
          form.basic.platform_data.message }}
        </div>
      </div>
    </el-dialog>
    <VHistory ref="historyRef" />
  </el-dialog>
</template>

<script setup>
import { nextTick, reactive } from 'vue';
import api from '../api'
import { ElMessage } from 'element-plus'
import VHistory from '@/components/VHistory'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
const platformVisible = ref(false)
let loadings = reactive({})
const historyRef = ref()

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const isLook = ref(false)
const open = async (id, option) => {
  isLook.value = option?.look
  if (!load.value) {
    load.value = true
    await 1
  }
  //新增
  form.value = {
    basic: {},
    sku: [],
    payment: [],
    inbound: [],
    abnormal: [],
    refund: [],
    log: [],
  }
  loadings = reactive({})
  visible.value = true
  formRef?.value?.resetFields()

  const res = await api.detail({ pa_id: id })
  form.value = res.data
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

const drawbackChange = val => {
  const { origin_is_drawback, sku_total_purchase_price_tax, sku_total_purchase_price } = form.value.basic
  form.value.basic.adjust_price = origin_is_drawback === val ? 0 : val === 2 ? sku_total_purchase_price - sku_total_purchase_price_tax : sku_total_purchase_price_tax - sku_total_purchase_price
}
// 提交
const create = async (is_submit) => {
  if (!await formRef?.value.validate()) return
  loadings[is_submit] = true
  const { pa_id, destination_warehouse, company_id, is_drawback, adjust_reason } = form.value.basic
  api.edit({ pa_id, destination_warehouse, company_id, is_drawback, is_submit, adjust_reason }).then(res => {
    ElMessage.success('操作成功')
    emit('success')
    close()
  }).finally(() => {
    loadings[is_submit] = false
  })
}

defineExpose({ open })
</script>